var headerDom = `  
<div>

    <div id='hea-controll-dom'>
        <div class='hea-left-icon' @click='offMask=true'>
                <img :src='icon_json.left' width='42px' height='38px' />
        </div>
        <div class='hea-middle' v-html='icon_json.middle'></div>
        <div class='hea-right-icon'>
                <img v-if='icon_json.right1' @click='openRighg1' style='margin-right:40px;' :src='icon_json.right1' width='45px' height='45px' />
                <img @click='openRighg2' :src='icon_json.right2' width='45px' height='45px' />
        </div>
    </div>

    <div id='mask' v-if='offMask' @click='offMask=false'></div>

    <transition enter-active-class='animated fadeInLeft' leave-active-class='animated fadeOutLeft'>
        <div id='left-controll-dom' v-if='offMask'>
            <div class='menu-no-login'>
                    <img :src="user.avatar" width='180px' height='195px' />
                    <p>
                        <span style='margin-right:10px;' v-text='user.ipone'>登陆 / 快速注册</span>
                        <img v-if='!have'  src="./static/img/icon-login.png" width='18px' height='18px' />
                    </p>
            </div>
            <div v-if='have'>
                    <div class='left-menu-list' @click='openMyVoucher'>
                        <p>
                            <img src='./static/img/left-kajuan.png' width='50px' height='37px' />
                            <span>我的卡劵</span>
                        </p>
                        <img src='./static/img/icon-left.png' width='15px' height='30px' />
                    </div>
                    <div class='left-menu-list' @click='openMyIntegral'>
                        <p>
                            <img src='./static/img/left-kajuan.png' width='50px' height='37px' />
                            <span>我的积分</span>
                        </p>
                        <img src='./static/img/icon-left.png' width='15px' height='30px' />
                    </div>
                    <div class='left-menu-list' @click='openOrder'>
                        <p>
                            <img src='./static/img/left-order.png' width='42px' height='50px' style='margin-right:38px' />
                            <span>我的订单</span>
                        </p>
                        <img src='./static/img/icon-left.png' width='15px' height='30px' />
                    </div>
                    <div class='left-menu-list' @click='openAddress'>
                        <p>
                            <img src='./static/img/left-address.png' width='45px' height='40px' style='margin-right:35px' />
                            <span>管理地址</span>
                        </p>
                        <img src='./static/img/icon-left.png' width='15px' height='30px' />
                    </div>
                    <div class='left-menu-list'>
                        <p>
                            <img src='./static/img/left-kefu.png' width='45px' height='37px' style='margin-right:35px' />
                            <span>联系客服</span>
                        </p>
                        <img src='./static/img/icon-left.png' width='15px' height='30px' />
                    </div>
                    <div class='left-menu-list' @click='goOut=true;'>
                        <p>
                            <img src='./static/img/left-off.png' width='45px' height='44px' style='margin-right:35px' />
                            <span>退出登陆</span>
                        </p>
                        <img src='./static/img/icon-left.png' width='15px' height='30px' />
                    </div>
            </div>
        </div>
    </transition>

    <div id='mask' style='z-index:102' v-if='goOut'></div>

    <transition enter-active-class='animated bounceIn' leave-active-class='animated bounceOut'>
        <div v-if='goOut' class='go-out-com'>
            <div class='close-notice-com'>
                <div class='close-img-com' @click='goOut=false;'></div>
                <p>提醒</p>
                <p>您是否确认退出？</p>
                <div class='close-show-hua-com'>
                    <img src='./static/img/close-hua.png' width='230px' height='200px' />
                </div>
                <div class='close-btn-sure'>
                    <button @click='closeUser'>确认退出</button>
                </div>
            </div>
        </div>
    </transition>

</div>

`;

Vue.component('hea-controll', {
    data: function() {
        return {
            //控制左边菜单显示
            offMask: false,
            //控制退出提示
            goOut: false,
            //登陆与否
            have: true,
            //如果have为true，就把user的两个字段替换真实数据
            user: {
                avatar: './static/img/img-no-login.png',
                ipone: '登陆 / 快速注册'
            },
        }
    },
    props: ['icon_json'],
    template: headerDom,
    methods: {
        openRighg1: function() {
            this.$emit('right1');
        },
        openRighg2: function() {
            this.$emit('right2');
        },
        //进入我的卡劵
        openMyVoucher: function() {
            window.location.href = HREF + 'my-voucher.html';
        },
        //进入我的积分
        openMyIntegral: function() {
            window.location.href = HREF + 'my-integral.html';
        },
        //进入我的订单
        openOrder: function() {
            window.location.href = HREF + 'my-order.html';
        },
        //进入我的地址
        openAddress: function() {
            window.location.href = HREF + 'address.html';
        },
        //退出登陆
        closeUser: function() {
            alert('确认退出');
            this.goOut = false;
        }
    }
});